<template>
  <div class="table-bg1">
    <div style="display: flex;padding-top: 15px;padding-left:16px">
      <a-form layout="inline">
        <a-form-item label="商品名称">
          <a-input
            v-model="searchName"
            placeholder="请输入商品名称"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            @click="handSearc2()"
          >搜索</a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-table
      ref="table"
      :rowKey="record => record.id"
      :columns="columns"
      :dataSource="data"
      :loading="loading"
      :pagination="pagination"
      @expandedRowsChange="bol=>zhankaihang(bol)"
    >
      <!-- dataSource="data" 数据源 -->
      <!-- 图片插槽 -->
      <div
        slot="expandedRowRender"
        slot-scope="record, index, indent, expanded"
      >
        <a-button
          style="margin-bottom:20px;"
          class="flex-alv"
          icon="plus-circle"
          type="primary"
          @click="shouyushou(record.id)"
        >添加</a-button>
        <a-timeline>
          <a-timeline-item
            v-for="inner in innerdata"
            :key="inner.id"
          >
            {{`${inner.startTitle}---${inner.startStage}---${inner.startTime}--¥${inner.startPice}元---销量${inner.startSales}`}}
            <span
              class="del-inner"
              @click="delInnerli(inner.id)"
            >删除</span>
          </a-timeline-item>
        </a-timeline>
      </div>

      <div
        slot="img"
        slot-scope="text, record"
      >
        <img
          class="anty-img-wrap"
          style="width:20px;height:20px"
          :src="record.coverPic"
          alt
        />
      </div>
      <!-- 操作插槽 -->
      <div
        slot="action"
        slot-scope="text, record"
        class="innerbox"
      >
        <!-- {{record.startPresale}} -->
        <a-switch
          checkedChildren="打开预售"
          :defaultChecked="record.startPresale?true:false"
          unCheckedChildren="关闭预售"
          @change="bol=>changeYuShouState(bol,record)"
        />
      </div>
      <!-- 售价插槽 -->
      <div
        slot="price"
        slot-scope="text, record"
      >{{'¥'+text+'元'}}</div>
    </a-table>
    <!-- 新建预售阶段 -->
    <a-modal
      title="新建预售信息"
      :visible="newysV"
      @ok="addyushou"
      @cancel="newysCancel"
      cancelText="返回"
      okText="提交"
    >
      <a-form
        :form="form"
        @submit="addyushou"
      >
        <a-form-item label="阶段标题">
          <a-input
            type="text"
            v-decorator="['startTitle', {rules: [{ required: true, message: '请输入阶段标题!' }]}]"
          />
        </a-form-item>
        <a-form-item label="阶段名称">
          <a-input
            type="text"
            v-decorator="['startStage',{rules: [{ required: true, message: '请输入阶段名称!' }]}]"
          />
        </a-form-item>
        <a-form-item label="开放时间">
          <a-date-picker
            format="YYYY-MM-DD"
            v-decorator="['startTime',{rules: [{ required: true, message: '请选择开放时间!' }]}]"
          />
        </a-form-item>
        <a-form-item label="¥价格(元)">
          <a-input
            type="text"
            v-decorator="['startPice',{rules: [{ required: true, message: '请输入阶段价格!' }]}]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import reqwest from "reqwest";

export default {
  mounted() {
    // this.fetch();
  },
  data() {
    return {
      searchName: "",
      loading: true,
      //   biaotou: [],
      datalength: 0,
      addid: null,
      loadings: true,
      form: this.$form.createForm(this),
      newysV: false,
      columns: [
        {
          title: "商品名字",
          align: "center",
          dataIndex: "name",
          width: 200
        },
        {
          title: "ID",
          align: "center",
          width: 100,
          dataIndex: "id"
        },
        {
          title: "售价",
          align: "center",
          width: 100,
          dataIndex: "price",
          scopedSlots: { customRender: "price" }
        },
        {
          title: "图片",
          align: "center",
          dataIndex: "coverPic",
          width: 120,
          scopedSlots: { customRender: "img" }
        },
        //插槽用法
        {
          title: "操作",
          align: "center",
          width: 200,
          scopedSlots: { customRender: "action" }
        }
      ],
      innercolumns: [
        {
          title: "处于阶段",
          align: "center",
          dataIndex: "start_stage",
          width: 200
        },
        {
          title: "预售开启时间",
          align: "center",
          dataIndex: "start_time",
          width: 200
        },
        //插槽用法
        {
          title: "增加",
          align: "center",
          width: 200,
          scopedSlots: { customRender: "inneraction" }
        }
      ],
      //分页
      pagination: {
        // 分页配置器
        pageSize: 15, // 一页的数据限制
        current: 0, // 当前页
        total: 0, // 总数
        onChange: (page, pageSize) => {
          this.changePage(page, pageSize);
        }
      },
      data: [],
      innerdata: [],
      newysCancel: () => {
        this.newysV = !this.newysV;
      }
    };
  },
  created() {
    var _this = this;
    _this
      .$get("/gen/hjmallind-goods/list", {
        pageNum: _this.pagination.current,
        pageSize: _this.pagination.pageSize,
        name: _this.searchName
      })
      .then(data => {
        console.log(data, "过滤的预售管理");
        // console.log(data.data.data.records);
        _this.pagination.total = data.data.data.total;
        _this.data = data.data.data.records;
        // _this.data = _this.data.filter(item => {
        //   return item.isDelete == 1
        // })

        _this.loading = false;
      })
      .catch(err => {
        console.warn(err);
      });
  },
  methods: {
    handSearc2() {
      var _this = this;
      _this
        .$get("/gen/hjmallind-goods/list", {
          pageNum: _this.pagination.current,
          pageSize: _this.pagination.pageSize,
          name: _this.searchName
        })
        .then(data => {
          // console.log(data.data.data.records);
          _this.pagination.total = data.data.data.total;
          _this.data = data.data.data.records;
          // _this.data = _this.data.filter(item => {
          //   return item.isDelete == 1
          // })
          console.log(_this.data, data, "过滤的预售管理");
          _this.loading = false;
        })
        .catch(err => {
          console.warn(err);
        });
    },
    //切换页面
    changePage(page, pageSize) {
      var _this = this;
      _this.pagination.current = page;
      console.log(_this.pagination.pageSize);
      _this
        .$get("/gen/hjmallind-goods/list", {
          pageNum: _this.pagination.current,
          pageSize: _this.pagination.pageSize,
          name: _this.searchName
        })
        .then(data => {
          // console.log(data.data.data.records);
          _this.pagination.total = data.data.data.total;
          _this.data = data.data.data.records;
          // _this.data = _this.data.filter(item => {
          //   return item.isDelete == 1;
          // });
          _this.datalength = data.data.data.records.length - _this.data.length;
          console.log(_this.datalength, _this.data, "过滤的预售管理");
        })
        .catch(err => {
          console.warn(err);
        });
    },
    //改变预售状态
    changeYuShouState(e, record) {
      console.log(e, record.id);
      this.$post(
        `/gen/hjmallind-goods/upadte/id/${record.id}/status/${e ? 1 : 0}`,
        {}
      )
        .then(data => console.log(data.data))
        .catch(err => {
          throw err;
        });
    },
    //展开行获取数据
    zhankaihang(e) {
      // this.loading = true
      // var newId = e.pop()
      // console.log(newId, "这是设么??");
      //   /gen/hjmaliand-start-presale/{id}
      var _this = this;
      _this.rowid = e.pop();
      // _this.rowid = e[0]
      _this
        .$get(`/gen/hjmaliand-start-presale/${_this.rowid}`, {})
        .then(data => {
          // console.log(data.data.data.records);
          console.log(data.data.data, "===?????");
          _this.innerdata = data.data.data;
          console.log(_this.innerdata);
          // _this.pagination.total = data.data.data.total;
          // _this.data = data.data.data.records;
          // console.log(_this.data);
          this.loading = false;
          // _this.loadings = false
        })
        .catch(err => {
          console.warn(err);
        });
    },
    //删除预售
    delInnerli(id) {
      var _this = this;
      console.log(id);
      this.$confirm({
        title: "确定要删除这一条预售信息?",
        content: "一旦删除，您将无法找回",
        onOk() {
          _this
            .$delete(`/gen/hjmaliand-start-presale/delete/${id}`, {})
            .then(data => {
              _this
                .$get(`/gen/hjmaliand-start-presale/${_this.rowid}`, {})
                .then(data => {
                  _this.innerdata = data.data.data;
                });
            });
        },
        onCancel() {}
      });
    },
    //显示预售窗口
    shouyushou(e) {
      this.newysV = !this.newysV;
      this.addid = e;
      console.log(this.addid, "wdasdasdwadxzcsd");
    },
    //添加单条预售
    addyushou(e) {
      var _this = this;
      this.form.validateFields((err, values) => {
        // 这里做逻辑处理

        console.log(values.startTime.format("YYYY-MM-DD")); // { name: '' }
        console.log(_this.rowid, "这有肾么贵"); // { name: '' }
        if (!err) {
          this.$post(`/gen/hjmaliand-start-presale/insert`, {
            //处于阶段
            startStage: values.startStage,
            //信息属于商品的id
            startPres: _this.rowid,
            // 记录时间
            startTime: values.startTime.format("YYYY-MM-DD"),
            //商品的名字
            startTitle: values.startTitle,
            // 商品的价格
            startPice: values.startPice,
            //销量
            startSales: 0
          }).then(data => {
            _this.newysV = false;
            //获取新的
            _this
              .$get(`/gen/hjmaliand-start-presale/${_this.rowid}`, {})
              .then(data => {
                _this.innerdata = data.data.data;
              });
          });
        }
      });
    }
  }
};
</script>
<style scope>
.table-bg1 {
  background: #fff;
  padding: 0 20px;
}
.del-inner {
  cursor: pointer;
  color: rgb(176, 32, 32);
}
.del-inner:hover {
  color: rgb(218, 80, 80);
}
.flex-alv {
  display: flex;
  flex-direction: row;
  align-content: center;
}
</style>